import React from 'react';
import { Typography, Box, Link as MuiLink, Container, Grid, Divider, IconButton } from '@mui/material';
import { styled } from '@mui/material/styles';
import { GitHub, LinkedIn, Email, MedicalServices, Favorite } from '@mui/icons-material';

const FooterContainer = styled('footer')(({ theme }) => ({
  background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
  color: 'white',
  padding: theme.spacing(6, 0, 3),
  marginTop: 'auto',
}));

const Footer: React.FC = () => {
  return (
    <FooterContainer>
      <Container maxWidth="lg">
        <Grid container spacing={4}>
          <Grid size={{ xs: 12, md: 6 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              {/* <MedicalServices sx={{ fontSize: 32, color: '#667eea', mr: 1 }} /> */}
              <Typography variant="h5" sx={{ fontWeight: 700, color: 'white' }}>
              🧠 BrainAI
              </Typography>
            </Box>
            <Typography variant="body1" sx={{ color: 'rgba(255,255,255,0.8)', mb: 3, lineHeight: 1.6 }}>
              基于深度学习的脑肿瘤智能诊断系统，致力于为医疗健康事业提供先进的AI技术支持。
            </Typography>
            <Box sx={{ display: 'flex', gap: 1 }}>
              <IconButton 
                sx={{ 
                  color: 'rgba(255,255,255,0.7)',
                  '&:hover': { color: '#667eea', backgroundColor: 'rgba(102, 126, 234, 0.1)' }
                }}
              >
                <GitHub />
              </IconButton>
              <IconButton 
                sx={{ 
                  color: 'rgba(255,255,255,0.7)',
                  '&:hover': { color: '#667eea', backgroundColor: 'rgba(102, 126, 234, 0.1)' }
                }}
              >
                <LinkedIn />
              </IconButton>
              <IconButton 
                sx={{ 
                  color: 'rgba(255,255,255,0.7)',
                  '&:hover': { color: '#667eea', backgroundColor: 'rgba(102, 126, 234, 0.1)' }
                }}
              >
                <Email />
              </IconButton>
            </Box>
          </Grid>
          
          <Grid size={{ xs: 12, md: 3 }}>
            <Typography variant="h6" sx={{ fontWeight: 600, mb: 2, color: 'white' }}>
              快速链接
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              {[
                { label: '首页', href: '/' },
                { label: '数据分析', href: '/data' },
                { label: 'AI诊断', href: '/prediction' },
                { label: '关于项目', href: '/about' },
              ].map((link, index) => (
                <MuiLink
                  key={index}
                  href={link.href}
                  sx={{
                    color: 'rgba(255,255,255,0.7)',
                    textDecoration: 'none',
                    '&:hover': {
                      color: '#667eea',
                      textDecoration: 'underline'
                    }
                  }}
                >
                  {link.label}
                </MuiLink>
              ))}
            </Box>
          </Grid>
          
          <Grid size={{ xs: 12, md: 3 }}>
            <Typography variant="h6" sx={{ fontWeight: 600, mb: 2, color: 'white' }}>
              技术支持
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.7)' }}>
                深度学习框架: PyTorch
              </Typography>
              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.7)' }}>
                前端技术: React + TypeScript
              </Typography>
              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.7)' }}>
                UI框架: Material-UI
              </Typography>
              <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.7)' }}>
                后端服务: Python + Flask
              </Typography>
            </Box>
          </Grid>
        </Grid>
        
        <Divider sx={{ my: 4, borderColor: 'rgba(255,255,255,0.1)' }} />
        
        <Box sx={{ textAlign: 'center' }}>
          <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.6)', mb: 1 }}>
            © {new Date().getFullYear()} BrainAI - 脑肿瘤智能诊断系统. 保留所有权利.
          </Typography>
          <Typography 
            variant="body2" 
            sx={{ 
              color: 'rgba(255,255,255,0.6)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 0.5
            }}
          >
            Made with <Favorite sx={{ fontSize: 16, color: '#FF6B6B' }} /> for medical innovation
          </Typography>
          <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', mt: 1, display: 'block' }}>
            本项目仅用于学术研究和技术交流，不可用于实际医疗诊断
          </Typography>
        </Box>
      </Container>
    </FooterContainer>
  );
};

export default Footer;